<!DOCTYPE html>
<html>
    <head>
        <title>Go Clock</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="my-clock.css">
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
        <script src="jquery-1.11.1.js"></script>
        <script src="slidebars.js"></script>
        <script src="go-clock.js"></script>
        <script src="my-clock.js"></script>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable = no, minimal-ui">
        <link rel="shortcut icon" href="images/white_stone1.png" type="image/x-icon" />
        <link rel="stylesheet" href="slidebars.css">
    </head>
    <body>
        <link rel="apple-touch-icon" href="touch-icon.png">
        <div id="about_box">
            <p style="font-weight: bold; font-size: larger; text-align: center">About</p>
            <p>The Go Clock is a virtual Goban where the stones are used to tell you the time, saving you from the effort of
                setting up and continually updating your own Go board.</p>
            <p>Use the menu in the top left to configure it, or just tap the board to change the clock type.</p>
            <p><span style="font-weight: bold;">Tip of the day:</span> <span id="tip_of_the_day"></span></p>
            <p style="font-size: small">&copy; Broken Symmetry/Scott Griffiths, and released as open source under the MIT licence.
                See <a href="http://code.google.com/p/go-clock/">Google code</a> for more information.</p>
        </div>
        <div id="sb-site">
            <div id="menu" class="sb-toggle-left">
                ≡
            </div>
            <div id="goban">
                <div>
                    <canvas width=820 height=850 id="goCanvas"></canvas>
                </div>
            </div>
        </div>
        <div id="sidebar" class="sb-slidebar sb-left sb-momentum-scrolling sb-width-custom" data-sb-width="250px"">
            <div id="menu-title">Go Clock</div>
            <nav>
                <ul class="sb-menu">
                    <li><a>Clock face: <span id="clock_face"></span></a></li>
                    <li><a>Background: <span id="change_background"></span></a></li>
                    <li><a>Speed: <span id="stone_speed"></span></a></li>
                    <li class="sb-close"><a id="about">About</a></li>
                </ul>
            </nav>
        </div>

    </body>
</html>